import React from 'react';
import { inject, observer } from 'mobx-react';
import { Row, Col } from 'antd';
import { toJS } from 'mobx';
import { WeaTable, WeaLocaleProvider, WeaBrowser } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('odocRequestStore')
@observer
class Main extends React.Component {
  constructor(props) {
    super(props);
    this.onSelectedChange = this.onSelectedChange.bind(this);
  }

  getInstance(key, instance) {
    if (this.instances) {
      this.instances[key] = instance;
    } else {
      this.instances = [];
      this.instances[key] = instance;
    }
  }

  getColumns() {
    const columns = [
      {
        title: getLabel(511479, '流转环节'),
        dataIndex: 'nodename',
        key: 'nodename',
        width: '20%',
      },
      {
        title: getLabel(33356, '操作人员'),
        dataIndex: 'userIds',
        key: 'userIds',
        width: '80%',
        render: (text, item) => {
          const { nodeid, userList = [], sqlwhere = '', sqlwhere1 = '', selected = false } = item;
          let coms = null;

          const browserParams = { sqlwhere };
          const browserParams1 = { sqlwhere: sqlwhere1 };

          let viewAttr = 2;
          if (selected) {
            viewAttr = 3;
          }

          const userCom = (
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@y4l7qi@browser`}
              type={17}
              ref={this.getInstance.bind(this, nodeid)}
              isSingle={false}
              title={getLabel(505966, '选择人员')}
              onChange={(ids, names, datas) => {
                datas = toJS(datas);
                const rowData = { userIds: ids, userNames: names, userList: datas };
                this.onUpdateRow(nodeid, rowData);
              }}
              viewAttr={viewAttr}
              maxBrowerHeight={60}
              completeParams={{ ...browserParams1 }}
              conditionDataParams={{ ...browserParams }}
              dataParams={{ ...browserParams }}
              replaceDatas={userList}
            />
          );

          const clearCom = (
            <a className="deletebtn"
              onClick={this.onClearRow.bind(this, nodeid)}
            >
              {getLabel(523406, '清空操作人员')}
            </a>
          );

          if (userList && userList.length > 0) {
            coms = (
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@5v1foc@row`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5xnqhz@col`} span={18}>{userCom}</Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@by8fp5@col`} span={6}>{clearCom}</Col>
              </Row>
            );
          } else {
            coms = (
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@e3812n@row`}>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lv9viq@col`} span={18}>{userCom}</Col>
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@atczkn@col`} span={6} />
              </Row>
            );
          }

          return coms;
        },
      },
    ];

    return columns;
  }

  onUpdateRow(recordId, rowData) {
    const { odocRequestStore } = this.props;
    odocRequestStore.updateRow(recordId, rowData);
  }

  onClearRow(recordId) {
    const { odocRequestStore } = this.props;
    odocRequestStore.clearRow(recordId);
  }

  onSelectedChange(selectedRowKeys) {
    const { odocRequestStore } = this.props;
    odocRequestStore.updateSelectKeys(selectedRowKeys);
  }

  render() {
    const { odocRequestStore } = this.props;
    let { nodeOperatorList, selectedRowKeys } = odocRequestStore;
    nodeOperatorList = toJS(nodeOperatorList);

    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectedChange,
    };

    return (
      <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@gwk4pc`}
        columns={this.getColumns()}
        dataSource={nodeOperatorList}
        rowSelection={rowSelection}
        pagination={false}
        scroll={{ y: 190 }}
        rowKey={'nodeid'}
      />
    );
  }
}

export default Main;
